<template>
  <div id="salvenote">
    <div class="page-header">
      <span class="title-item">设备更换</span>
      <span class="download-btn">
        <a-icon type="cloud-download" />导出数据
      </span>
    </div>
    <div class="infor">
      <a-row style="display: flex;align-items: center;padding:20px 0;">
        <span style="color:#9fb043;">关键字</span>
        <a-col :span="5" style="width:200px;margin-left:10px">
          <a-input placeholder v-model="key" />
        </a-col>

        <a-col :span="2">
          <a-button @click="getdata()" class="sousuobtn">查询</a-button>
        </a-col>
      </a-row>
    </div>
    <div class="table-form">
      <a-table
        :rowKey="record=> record.id"
        :columns="columns"
        :data-source="data"
        :pagination="false"
      >
        <span slot="action" slot-scope="text,record">
          <a class="solvebtn" @click="showModal(record)">设备更换</a>
          <!--<a class="solvebtn">设备维修情况</a>-->
        </span>
      </a-table>

      <a-modal v-model="visible" title="设备更换" centered>
        <a-form-model :label-col="{ span: 4 }" :wrapper-col="{ span: 17 }">
          <a-form-model-item label="公司名称" :wrapper-col="{ span: 13 }" :label-col="{ span: 8 }">
            <a-select v-model="change.company" allow-clear @change="companyChange">
              <a-select-option
                :value="item.companyName"
                v-for="(item,index) in companyList"
                :key="index"
              >{{item.companyName}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="站点名称" :wrapper-col="{ span: 13 }" :label-col="{ span: 8 }">
            <a-select allow-clear @dropdownVisibleChange="drop" v-model="change.monitorName">
              <a-select-option
                :value="item"
                v-for="(item,index) in monitorList"
                :key="index"
              >{{item}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="更换设备" :wrapper-col="{ span: 13 }" :label-col="{ span: 8 }">
            <a-select allow-clear @dropdownVisibleChange="dropChange" v-model="form.equipmentId">
              <a-select-option
                :value="item.id"
                v-for="(item,index) in spareList"
                :key="index"
              >{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="预计使用寿命" :wrapper-col="{ span: 10 }" :label-col="{ span: 8 }">
            <a-input v-model="form.expectedLife" />
          </a-form-model-item>
        </a-form-model>
        <template slot="footer">
          <a-button class="btn" type="primary" @click="confirmSend">确认</a-button>
          <a-button class="btn" type="info" @click="cancelBtn">取消</a-button>
        </template>
      </a-modal>
      <div class="bottompage">
        <div></div>
        <div class="page-box">
          <a-pagination
            :show-total="total => `共 ${total}条记录`"
            v-model="current"
            :total="total"
            :defaultPageSize="size"
            :item-render="itemRender"
            @change="pagechangeFn"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      moment,
      data: [],
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          scopedSlots: { customRender: "name" },
          ellipsis: true,
          customRender: (text, record, index) =>
            `${(this.current - 1) * this.size + index + 1}`,
          width: "100px",

          align: "center",
        },
        {
          title: "备件型号",
          dataIndex: "spareVersion",
          align: "center",
        },
        {
          title: "备件名称",
          dataIndex: "spareName",
          align: "center",
        },

        {
          title: "生产厂商",
          dataIndex: "manufactureFactory",
          align: "center",
        },

        {
          title: "申领时间",
          dataIndex: "time",

          align: "center",
        },

        {
          title: "操作",
          dataIndex: "",
          key: "x",
          scopedSlots: { customRender: "action" },
          align: "center",
        },
      ],
      current: 1,
      key: "",
      userId: "",
      size: 10,
      total: 0,
      typeId: [],
      addModalVisible: false,
      send: {}, //模态框请求参数
      visible: false,
      form: {
        id: "", //申领库存id
        equipmentId: "", //设备id
        userId: "", //当前用户id
        expectedLife: "",
      },
      companyList: [], //公司列表
      monitorList: [], //站点列表
      spareList: [], //设备列表
      change: {
        company: "",
        monitorName: "",
        current: "1",
        size: "1000",
      },
    };
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(
            `selectedRowKeys: ${selectedRowKeys}`,
            "selectedRows: ",
            selectedRows
          );
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === "Disabled User", // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },

  mounted() {
    this.getdata();

    this.getId();
  },
  methods: {
    //模态框
    showModal(data) {
      console.log(data);
      this.visible = true;
      this.form.id = data.id;
      //获取公司名称
      this.$api.GetfindCompanyIdAndName().then((res) => {
        console.log(res);
        this.companyList = res.data.data;
      });
    },
    //公司名称下拉选择
    companyChange() {
      if (this.change.company !== null || this.change.company !== "") {
        this.monitorList = [];
        this.serachMonitorName();
      }
    },
    //站点下拉
    drop() {
      if (this.change.company == "") {
        this.$message.error("请选择公司");
      }
      // else {
      //   this.serachMonitorName();
      // }
    },
    //更换设备下拉
    dropChange() {
      if (this.change.company == "" && this.change.monitorName == "") {
        this.$message.error("请选择公司");
      } else {
        this.$api.PostEquipmentFindPage(this.change).then((res) => {
          console.log(res);
          this.spareList = res.data.data;
        });
      }
    },
    //搜索当前公司站点
    serachMonitorName() {
      this.$api
        .PostEquipmentFindPage({
          current: "1",
          size: "1000",
          name: "",
          equipmentType: "",
          status: "",
          monitorAreaId: "",
          monitorFactoryId: "",
          geom: "",
          monitorType: "",
          companyName: this.change.company,
          monitorName: "",  
        })
        .then((res) => {
          console.log(res);
          res.data.data.forEach((v) => {
            this.monitorList.push(v.monitorName);
          });
          console.log(this.monitorList);
        });
    },
    //确认更换
    confirmSend() {
      if (this.form.expectedLife == "") {
        this.$message.error("预计使用寿命不能为空！");
      } else {
        this.$api.PostWriteRepair(this.form).then((res) => {
          if (res.data.code == 0) {
            this.$message.success("更换成功");
            this.form = {};
          } else {
            this.$message.error(res.data.errorMessage);
            this.form = {};
          }
          this.getdata();
        });
        this.visible = false;
      }
    },
    //取消
    cancelBtn() {
      this.visible = false;
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf("day");
    },
    //获取当前用户和部门
    getId() {
      this.userId = this.$user.id;
      this.form.userId = this.$user.id;
      //this.form.deptId = this.$user.deptId;
      console.log(this.userId);
    },
    //获取时间
    onChanges(date, dateString) {
      console.log(date, dateString);
      this.form.applyTime = moment(dateString).valueOf();
      console.log(this.form.applyTime);
    },
    // 分页器
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(page, pageSize);
      this.current = page;
      this.size = pageSize;
      this.getdata();
    },
    // 查询获取统计库存
    getdata() {
      this.$api
        .PostRepairsList({
          currentPage: this.current,
          pageSize: this.size,
          searchKey: this.key,
          userId: this.userId,
        })
        .then((res) => {
          console.log(res);
          this.data = res.data.data.records;
          this.total = res.data.data.total;
          this.data.forEach((v) => {
            v.time = moment(v.time).format("YYYY-MM-DD");
          });
        });
    },
    //获取类型id
    getTypeId() {
      this.$api.GetstockBytype().then((res) => {
        this.typeId = res.data.data;
      });
    },
    //获取备品属性
    getAtrribute() {
      this.$api.GetlistSpareProperty().then((res) => {
        this.property = res.data.data;
      });
    },
    // selectedPro() {
    //   this.getTypeId();
    // },
    //类型下拉框事件
    // drop() {
    //   console.log(111);
    //   if (this.sparePropertyId == "") {
    //     this.$message.error("请先选择设备属性!");
    //   }
    // },
  },
};
</script>
<style scoped src="../../../assets/style/warning.css"></style>
<style scoped lang="scss" >
.sousuobtn {
  letter-spacing: 8px;
  background: #2c6a5f;
  border: 0;
  color: black;
  margin-left: 20px;
}
#salvenote {
  position: relative;
  width: 98%;
  height: 98%;
  padding: 1%;
  box-sizing: border-box;
}
.solve-img {
  display: flex;
  justify-content: space-evenly;
}

#salvenote .solvebtn {
  margin-right: 10px;
  border: none;
  font-weight: 700;
  color: #2c6a5f;
}
#salvenote .ant-btn-danger {
  color: #1c2c2c;
  margin-right: 10px;
  background-color: #2c6a60;
  border: none;
  font-weight: 700;
}
#salvenote .ant-btn-primary {
  border: none;
  color: #1c2c2c;
  background-color: #c93756;
}
/* 分页 */
::v-deep .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}
.bottompage {
  width: 96%;
  position: absolute;
  right: 3%;
  bottom: 10px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
#salvenote ::v-deep .ant-checkbox-inner {
  border: 2px solid #2e9685;
  background-color: rgba(140, 179, 174, 0.5) !important;
}
#salvenote .ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
  border: 0;
  background-color: rgba(30, 50, 48, 0.5);
  box-shadow: 0 0 10px 1px #188471 inset;
}
</style>
